<template>
  <div class="forget-page">
    <div class="forget-top clearfix">
        <div class="forget-logo fl">
          <a href="#/login" class="go-back">
            <img src="../../assets/images/forget-logo.png" />
          </a>
        </div>
        <div class="forget-hd">
          <h1>找回密码</h1>
        </div>
        <a href="#/login" class="go-back fr">
        登录
        </a>
      </div>
    <div class="wrapper">      
      <div class="forget-box">
        <div class="forget-step">
          <el-steps :active="active" finish-status="success" align-center>
            <el-step title="请输入手机号码"></el-step>
            <el-step title="身份确认"></el-step>
            <el-step title="重设密码"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
        </div>
        <!-- 第一步 -->
        <div class="step1" v-if="active === 0">
          <div class="forget-form">
            <div class="login-input-row">
              <label>
                <i class="iconfont iconphone"></i>
                <VueCountryIntl schema="popover" v-model="schemaPopover.default">
                  <button class="country-code-btn" type="button" slot="reference">
                    +{{schemaPopover.default || '--'}}
                    <i class="el-icon-caret-bottom"></i>
                  </button>
                </VueCountryIntl>
              </label>
              <input placeholder="请输入您已经注册过的手机号码" v-model="phone" />
            </div>
            <div class="login-error" v-show="error.showMsg">
              <i class="icon-error"></i>
              {{error.msg}}
            </div>
            <div class="num-code-input">
              <input placeholder="请输入验证码" v-model="img.code" />
              <div class="num-code">
                <img :src="'data:image/jpeg;base64,'+ img.img" @click="imgCode" />
              </div>
            </div>
            <el-button
              type="primary"
              class="login-btn"
              @click="sendSmsCode"
              v-if="active===0||active==1||active==2"
            >下一步</el-button>
          </div>
        </div>
        <!-- 第二步 -->
        <div class="step2" v-if="active === 1">
          <div class="forget-form">
            <div class="msg-code-input clearfix">
              <input placeholder="请输入验证码" v-model="smsCode" />
              <div class="sent-code-msg">
                <el-button
                  type="success"
                  class="sent-code-msg-btn"
                  v-on:click="show = !show"
                  :class="['get-code']"
                  :disabled="disabled"
                >{{tipText}}</el-button>
              </div>
            </div>
            <p v-show="show" class="sent-tips">
              验证码已发送至您的手机
              <b>{{ phone }}</b> ,请你查收
            </p>
            <div class="login-error" v-show="error.showMsg">
              <i class="icon-error"></i>
              {{error.msg}}
            </div>
            <el-row class="btn-g">
              <el-button class="defult-btn" @click="prev" v-if="active===1||active==2||active==3">返回</el-button>
              <el-button
                type="primary"
                @click="checkSmsCode"
                v-if="active===0||active==1||active==2"
              >提交</el-button>
            </el-row>
          </div>
        </div>
        <!-- 第三步 -->
        <div class="step3" v-if="active === 2">
          <div class="forget-form">
            <div class="login-input-row">
              <label>请输入新密码</label>
              <input
                type="password"
                v-model="password"
                placeholder="请输入新密码"
                onfocus="true"
                :click="hideError"
              />
            </div>
            <div class="login-input-row">
              <label>请输入新密码</label>
              <input type="password" v-model="password1" placeholder="请再次输入新密码" />
            </div>
            <div class="login-error" v-show="error.showMsg">
              <i class="icon-error"></i>
              {{error.msg}}
            </div>
            <el-button
              type="primary"
              class="login-btn"
              @click="setPassword"
              v-if="active===0||active==1||active==2"
            >确认重置</el-button>
          </div>
        </div>
        <!-- 第四步 -->
        <div class="step4" v-if="active === 3">
          <div class="forget-form">
            <div class="forget-deal">
              <div class="change-password-done">
                <i class="iconfont iconcheck"></i>
              </div>
              <p>您的密码已经成功重置，请以新的密码登录</p>
              <small>{{this.loginPageTime}}秒后自动跳转登录页面</small>
            </div>
            <el-button type="primary" @click="gotolink" class="login-btn">立即登录</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueCountryIntl from "../../components/vue-country-intl";
import Http from "../../libs/http.js";

export default {
  name: "Forget",
  data() {
    return {
      active: 0,
      schemaPopover: {
        default: "86",
        country: "",
        defaultValue: "86"
      },
      smsCode: null,
      token: null,
      show: false,
      selectedObj: {},
      tipText: "获取验证码",
      time: 60,
      loginPageTime: 10,
      disabled: true,
      phone: null,
      passsword: null,
      password1: null,
      error: {
        showMsg: false,
        msg: null
      },
      img: {
        img: null,
        key: null,
        code: null
      },
      timeCounter: null
    };
  },
  components: {
    VueCountryIntl
  },
  methods: {
    onchange(selected) {
      this.selectedObj = selected;
    },
    prev() {
      --this.active;
      if (this.active < 0) this.active = 0;
    },
    next() {
      if (this.active++ > 3) this.active = 0;
      this.hideError();
    },
    //返回登录
    gotolink() {
      this.$router.replace("/login");
    },
    // 倒计时
    timer() {
      this.timeCounter = setInterval(() => {
        this.time--;
        console.log(this.time);
        if (this.time < 0) {
          clearInterval(this.timeCounter);
          this.setDisabled(false);
          this.time = 60;
          this.tipText = "重新获取";
        } else {
          this.tipText = "重发" + this.time + "s";
        }
      }, 1000);
    },
    loginTimer() {
      this.timeCounter = setInterval(() => {
        this.loginPageTime--;
        console.log(this.time);
        if (this.loginPageTime < 0) {
          this.$router.replace("/login");
          clearInterval(this.timeCounter);
        }
      }, 1000);
    },
    // 设置disable的值
    setDisabled(val) {
      this.disabled = val;
    },

    /**
     * 图片验证码
     */
    imgCode: function() {
      Http.api("code/img").then(res => {
        this.img = res.data;
      });
    },
    /**
     * 发送图片验证码
     */
    sendSmsCode: function() {
      Http.api
        .post("code/sms", {
          imgCode: this.img.code,
          imgKey: this.img.key,
          phone: this.phone
        })
        .then(res => {
          console.log(res);
          this.timer();
          this.next();
        })
        .catch(error => {
          this.error.showMsg = true;
          this.error.msg = error.msg;
        });
    },
    checkSmsCode: function() {
      Http.api
        .get("user/checksms", {
          params: {
            code: this.smsCode,
            phone: this.phone
          }
        })
        .then(res => {
          this.token = res.data.token;
          this.next();
        })
        .catch(error => {
          this.error.showMsg = true;
          this.error.msg = error.msg;
        });
    },
    setPassword: function() {
      if (this.password != this.password1) {
        this.error.showMsg = true;
        this.error.msg = "两次输入的密码不同";
        return;
      } else {
        Http.api
          .put("user/passwordbysms", {
            password: this.password,
            token: this.token
          })
          .then(() => {
            this.loginTimer();
            this.next();
          })
          .catch(error => {
            this.error.showMsg = true;
            this.error.msg = error.msg;
          });
      }
    },
    hideError: function() {
      this.error.showMsg = false;
      this.error.msg = "";
    }
  },
  created() {
    this.imgCode();
  },
  destroyed() {
    this.clearInterval(this.timeCounter);
  }
};
</script>

